<template>
    <div>
        <el-row>
            <el-col :span="15">
                <el-form :inline="true" :model="queryMap" class="demo-form-inline">
                    <el-form-item label="员工姓名">
                        <el-input v-model="queryMap.name" placeholder="员工姓名"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="queryEmp">查询</el-button>
                </el-form>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="addEmp">新增</el-button>
                <el-button type="primary" @click="updateEmp">修改</el-button>
                <el-button type="primary" @click="delEmp">删除</el-button>
            </el-col>
        </el-row>
        <el-table
            ref="multipleTable"
            :data="empData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="empno"
                label="工号"
                width="80">
                <template slot-scope="scope">{{ scope.row.empno }}</template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="120">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column
                prop="password"
                label="密码"
                width="80">
                <template slot-scope="scope">{{ scope.row.password }}</template>
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性别"
                width="80">
                <template slot-scope="scope">{{ scope.row.sex }}</template>
            </el-table-column>
            <el-table-column
                prop="tel"
                label="电话"
                width="120">
                <template slot-scope="scope">{{ scope.row.tel }}</template>
            </el-table-column>
        </el-table>
<!--        分页栏
        background  背景色
        layout  分页栏的显示内容
        page-sizes  代表每页显示条数的下拉框
        total  代表总条数
         @size-change 每页显示条数切换时触发
         @current-change 页码切换时触发
         current-page 代表参数page
         :page-size 代表参数limit-->
        <el-pagination
            background
            @size-change="getSize"
            @current-change="getCurrent"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="queryMap.page"
            :page-size="queryMap.limit"
            :total="total">
        </el-pagination>

        <!--新增以及修改的弹出框-->
        <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
            <el-form ref="eForm" :model="empForm" label-position="right" :rules="rules">
                <el-form-item label="工号" :label-width="formLabelWidth" v-show="isEmpnoShow">
                    <el-input v-model="empForm.empno" autocomplete="off" style="width: 400px" :disabled="isEmpDisabled"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="empForm.name" autocomplete="off" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                    <el-input v-model="empForm.password" autocomplete="off" style="width: 400px" :disabled="isEmpDisabled"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-radio v-model="empForm.sex" label="男">男</el-radio>
                    <el-radio v-model="empForm.sex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
                    <el-input v-model="empForm.tel" autocomplete="off" style="width: 400px"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveUser">确 定</el-button>
                <el-button @click="resetForm">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "Emplist",
    data() {
        return {
            //uname: this.$store.getters.getUname,
            uname: '',

            empData: [],  //表格数据
            queryMap: {
                page: 1,
                limit: 10,
                name: '',
            },
            /*分页信息*/
            total: 0,  //数据总条数
            checkData: [],  //选中的数据
            formTitle: "新增员工",  //弹出框的标题
            dialogFormVisible: false,  //控制弹出框显隐的值
            formLabelWidth: '120px',  //文本显示宽度
            empForm: {
                empno: 0,
                name: '',
                password: 'a1s2d3',
                sex: '男',
                tel: ''
            },
            isEmpnoShow: true,

            rules: {
                name: [{
                    required: true, message: "输入员工姓名", trigger: "blur"
                }],
                password: [{
                    required: true, message: "输入密码", trigger: "blur"
                }],
                tel: [{
                    required: true, message: "输入电话", trigger: "blur"
                }]
            },
            isEmpDisabled: true
        }
    },
    methods: {
        /**
         * 表格的选中项发生变化时触发
         * @param val
         */
        handleSelectionChange(val) {
            //val是个数组对象，代表目前选中的表格数据
            console.log(val)
            this.checkData = val
        },

        /**
         * 加载表格中的员工信息
         */
        getEmpData() {
            //调用后台，获取数据
            this.$http.post("/employee/employeeList", this.queryMap).then(res => {
                console.log(res)
                //res.data  对应的是后台的return值
                this.empData = res.data.data  //列表数据
                this.total = res.data.count  //总条数
            })
        },

        /**
         * 查询表格数据
         */
        queryEmp() {
            //重新从第一页开始显示
            this.queryMap.page = 1
            this.getEmpData()
        },

        /**
         * 每页显示条数发生变化时触发
         * @param val  代表的是当前的每页显示条数
         */
        getSize(val) {
            this.queryMap.limit = val
            this.getEmpData()
        },
        /**
         * 当前页码发生变化时触发
         * @param val  代表的是当前的page值
         */
        getCurrent(val) {
            this.queryMap.page = val
            this.getEmpData()
        },


        addEmp() {
            this.isEmpnoShow = false
            this.dialogFormVisible = true
        },

        saveUser() {
            //表单验证
            this.$refs['eForm'].validate((valid) => {
                //如果校验都通过，那么valid为true
                if (valid) {
                    //请求后台。传递表单数据进行保存
                    if (this.empForm.empno === 0) {
                        this.$http.post("/user/addUser", this.empForm).then(res => {
                            if (res.data.code === "500") {
                                this.$message.warning("新增失败")
                            }
                            this.empForm.empno = res.data.uid
                            this.saveEmp()
                        })
                    }
                    else {
                        //编辑操作
                        this.$http.post("/employee/updateEmp", this.empForm).then(res => {
                            if (res.data === "success") {
                                this.$message.success("修改成功")
                                this.getEmpData()
                                this.dialogFormVisible = false
                                //清空表单数据以及提示信息
                                this.empForm = {
                                    empno: 0,
                                    name: '',
                                    password: 'a1s2d3',
                                    sex: '男',
                                    tel: ''
                                }
                                this.$refs['eForm'].resetFields()
                            }
                        })
                    }
                }
                else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        delEmp() {
            if (this.checkData.length === 0) {
                this.$message.warning("请选择要删除的数据")
                return
            }
            //确认删除
            this.$confirm('确定要删除选中的数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {  //点击确定后执行的动作
                //执行删除动作
                let empnos = []
                for (let i = 0; i < this.checkData.length; i++) {
                    empnos[i] = this.checkData[i].empno
                }
                //调用后台
                this.$http.post("/employee/delEmp", empnos).then(res => {
                    if (res.data === 'success') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        //重新加载表格数据
                        this.getEmpData()
                    }
                })

                this.$http.post("/user/delUser", empnos).then(res => {
                    // if (res.data === 'success') {
                    //     this.$message({
                    //         type: 'success',
                    //         message: '删除成功!'
                    //     })
                    //     //重新加载表格数据
                    //     this.getEmpData()
                    // }
                })

            }).catch(() => {  //点击取消后执行的动作
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        saveEmp() {
            this.$http.post("/employee/addEmp", this.empForm).then(res => {
                debugger
                if (res.data === "success") {
                    this.$message.success("新增成功")
                    this.getEmpData()
                    this.dialogFormVisible = false
                    //清空表单数据以及提示信息
                    this.empForm = {
                        empno: 0,
                        name: '',
                        password: 'a1s2d3',
                        sex: '男',
                        tel: ''
                    }
                    this.$refs['eForm'].resetFields()
                }
            })
        },

        updateEmp() {
            if (this.checkData.length === 0) {
                this.$message.warning("请选择要修改的员工信息")
                return
            }
            if (this.checkData.length > 1) {
                this.$message.warning("只能选择一条员工信息进行修改")
                return
            }

            //根据员工编号查询员工信息
            let empno = this.checkData[0].empno
            this.$http.get("/employee/getEmp/" + empno).then(res => {
                this.empForm = res.data
                this.dialogFormVisible = true
                this.formTitle = "修改员工信息"
            })
        },

        resetForm() {
            this.dialogFormVisible = false
            this.empForm = {
                empno: 0,
                name: '',
                password: 'a1s2d3',
                sex: '男',
                tel: ''
            }
            this.$refs['eForm'].resetFields()
        }
    },
    mounted() {
        //可以访问sessionStorage对象获取数据
        this.uname = sessionStorage.getItem("uname")

        //初始加载表格数据
        this.getEmpData()
    },
    beforeUpdate() {
        // this.$nextTick(() => { //在数据加载完，重新渲染表格
        //     this.$refs['table'].doLayout();
        // })
    }
}
</script>

<style scoped>

</style>